<template>
	<!-- 收料---普通联单详情 -->
	<view class="container">
		<topBar>联单详情</topBar>
		<scroll-view scroll-y class="scroll-y">
			<view class="content" v-if="info.orderStatus != 1">
				<view class="line">
					<view class="title">
						签收人员
					</view>
					<view class="val">
						{{info.signBy}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						签收时间
					</view>
					<view class="val">
						{{info.signTime}}
					</view>
				</view>

				<view class="line">
					<view class="title">
						签收方量
					</view>
					<view class="val">
						{{info.actualVolume}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						扣方情况
					</view>
					<view class="val">
						{{info.volumeReduce}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						扣方原因
					</view>
					<view class="val">
						{{info.reduceReason}}
					</view>
				</view>
			</view>
			<view class="content">
				<view class="line">
					<view class="title">
						联单编号
					</view>
					<view class="val">
						{{info.code}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						起点名称
					</view>
					<view class="val start">
						{{info.startingPlace}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						地址
					</view>
					<view class="val">
						<view class="addr">
							{{info.startingAddress}}
						</view>
					</view>
				</view>
				<view class="line">
					<view class="title">
						物料类型
					</view>
					<view class="val">
						{{info.rockName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						进场时间
					</view>
					<view class="val">
						{{info.siteInTime}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						进场图片
					</view>
					<view class="val">
						<image class="img" :src="info.siteInUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="line">
					<view class="title">
						出场时间
					</view>
					<view class="val">
						{{info.siteOutTime}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						出场图片
					</view>
					<view class="val">
						<image class="img" :src="info.siteOutUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="line">
					<view class="title">
						装载时间
					</view>
					<view class="val">
						{{info.loadTime}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						装载图片
					</view>
					<view class="val">
						<image class="img" :src="info.loadUrl" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="line">
					<view class="title">
						运输车辆
					</view>
					<view class="val">
						<view class="cart-code">
							{{info.carNumber}}
						</view>
						<Button2 class="btn" v-if="info.energyType">{{info.energyType}}</Button2>
						<Button2 class="btn danger" v-if="info.directory">{{info.directory}}
						</Button2>
					</view>
				</view>
				<view class="line">
					<view class="title">
						运企名称
					</view>
					<view class="val">
						{{info.transportCompanyName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						驾驶员
					</view>
					<view class="val">
						{{info.driverName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						联系电话
					</view>
					<view class="val">
						{{info.phone}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						运输距离
					</view>
					<view class="val">
						{{Number(info.transportDistance)/1000}} (公里)
					</view>
				</view>
				<view class="line">
					<view class="title">
						运输时长
					</view>
					<view class="val">
						{{info.transportDuration}}分钟
					</view>
				</view>
			</view>
			<view class="content">
				<view class="line">
					<view class="title">
						途径卡口
					</view>
					<view class="val start">
						<view v-if="info.bayonetImages">
							<view class="imgs">
								<image class="img" v-if="info.bayonetImages[0]" :src="info.bayonetImages[0]"
									mode="widthFix"></image>
								<image class="img" v-if="info.bayonetImages[1]" :src="info.bayonetImages[1]"
									mode="widthFix"></image>
							</view>
							<view @click="showMoreImg">
								点击查看更多
							</view>
						</view>
					</view>
				</view>
				<view class="line">
					<view class="title">
						终点名称
					</view>
					<view class="val end">
						{{info.terminusPlace}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						地址
					</view>
					<view class="val">
						<view class="addr">
							{{info.terminusAddress}}
						</view>
					</view>
				</view>
				<view class="line">
					<view class="title">
						进场时间
					</view>
					<view class="val">
						{{info.garbageInTime}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						进场图片
					</view>
					<view class="val">
						<image class="img" :src="info.garbageInUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="line">
					<view class="title">
						出场时间
					</view>
					<view class="val">
						{{info.garbageOutTime}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						出场图片
					</view>
					<view class="val">
						<image class="img" :src="info.garbageOutUrl" mode="widthFix"></image>
					</view>
				</view>
				<view class="line">
					<view class="title">
						卸载时间
					</view>
					<view class="val">
						{{info.unloadTime}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						卸载图片
					</view>
					<view class="val">
						<image class="img" :src="info.unloadUrl" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<BottomBtn @click="back">返回</BottomBtn>
		<!-- <BottomBtn @click="saveDischarging" v-else>签收</BottomBtn> -->
		<PreviewImgs :img-list="info.bayonetImages" v-if="isShowMoreImgs" @closePreview="closeMoreImgs" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button2 from '@/components/button2/button2.vue';
	import PreviewImgs from '@/components/previewImgs/previewImgs.vue';
	import { onLoad } from '@dcloudio/uni-app'
	import * as consumptionApi from '@/api/consumption/consumption.js';
	/* import { useConsumptionStore } from  '@/stroes';
	const consumptionStore = useConsumptionStore() */
	const info = ref({})
	const nowType = ref(0)
	onLoad((options) => {
		if (options.type) {
			nowType.value = options.type
		}
		uni.showLoading({
			title: '正在加载中'
		});
		getDetail(options.id)
	})

	// 获取联单详情
	const getDetail = (id) => {
		consumptionApi.getReceivingDetail(id).then(res => {
			let data = res.data;
			console.log(data, '联单详情');
			uni.hideLoading()
			if (data.code == 0) {
				info.value = data.data
				// consumptionStore.info = data.data
			}
		})
	}

	// 是否显示更多图片
	const isShowMoreImgs = ref(false)
	// 查看更多图片
	const showMoreImg = () => {
		isShowMoreImgs.value = true
	}
	// 关闭查看更多图片
	const closeMoreImgs = () => {
		isShowMoreImgs.value = false
	}
	// 进行收料签收
	const saveDischarging = () => {
		// uni.navigateBack()
		// 暂时都跳转未接地磅
		uni.navigateTo({
			url: '/pages/consumption/receivingConfirm2/receivingConfirm2'
		})
	}
	// 返回
	const back = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.scroll-y {
		margin-top: 32rpx;
		height: 1220rpx;
		overflow: hidden;
	}

	.content {
		margin: 0rpx 32rpx 24rpx;
		width: 686rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-top: 2rpx solid rgba(156, 159, 163, .1);
			border-bottom: 0rpx;

			.title {
				width: 40%;
				display: flex;
				align-items: center;
			}

			.val {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-weight: bold;
				text-align: right;
				white-space: nowrap;

				&.start {
					font-weight: normal;
					color: $primary-color;
				}

				&.end {
					font-weight: normal;
					color: $danger-color;
				}

				.cart-code {
					margin-right: 12rpx;
					color: $primary-color;

				}

				.danger {
					margin-left: 10rpx;
				}

				.addr {

					white-space: normal;
				}

				.img {
					margin-left: 14rpx;
					width: 108rpx;
					border-radius: 8rpx;
				}
			}

		}
	}
</style>